﻿
@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}

@section css {
    <link href="~/Assets/css/searchmodal.css" rel="stylesheet" />
    <link href="~/Assets/css/mui.picker.min.css" rel="stylesheet" />
    <script src="~/Assets/js/mui.picker.js"></script>
    <script src="~/Assets/js/mui.picker.min.js"></script>
    <script src="~/Assets/js/mui.dtpicker.js"></script>
    <style>
        .IsException {
            color: red;
        }

        .IsNormal {
            color: blue;
        }

        .mui-bar ~ .mui-content .mui-scroll-wrapper {
            top: 44px;
            height: auto;
        }
    </style>
}
<div ng-cloak ng-controller="CheckFormController">
    <header class="mui-bar mui-bar-nav">
        <a href="MCheckMenu" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
        <a id="menu-btn" class="mui-action-menu mui-icon mui-icon-search mui-pull-right"></a>
        <h1 class="mui-title" style="color:white;">检查台账</h1>
    </header>
    <div class="mui-content">
        <div id="pullrefresh" class="mui-scroll-wrapper">
            <div class="mui-scroll" id="checklist" ng-init="SearchModel={};GetMyParkList();
                  InitSupInspectionListPage();">
                <p ng-cloak style="margin:15px;font-size:15px;">
                    台账数量：{{TotalCount}}
                    <a href="MSupervisionInspectionAdd" style="float:right;margin-top:-5px;" class="mui-btn mui-btn-primary">添加监督检查</a> 
                </p>
                <ul ng-cloak class="mui-table-view mui-table-view-chevron mui-table-view-striped mui-table-view-condensed">
                    <li ng-cloak class="mui-table-view-cell" ng-repeat="x in CheckFormPageList" id="{{x.FormId}}">
                        <div ng-cloak style="position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%);">
                            <span class="mui-icon mui-icon-more"></span>
                        </div>
                        <div ng-cloak class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-blue mui-icon mui-icon-search" href="MDailyCheckFormDetail?FormId={{x.FormId}}"></a>
                            <button class="mui-btn mui-btn-red mui-icon mui-icon-trash" ng-click="DeleteCheckForm(x.FormId);"></button>
                        </div>
                        <div ng-cloak class="mui-table mui-slider-handle" ng-class="{'IsException':x.IsException}">
                            <div ng-cloak class="mui-table-cell mui-col-xs-10" ng-class="{'IsException':x.IsNormal}">
                                <h4 class="mui-ellipsis">{{x.PlaceName}}</h4>
                                <h5><b>登记人：{{x.CreateUserName}}</b></h5>
                                <p ng-cloak class="mui-h6 mui-ellipsis">检查单号：{{x.FormNo}}</p>
                                <p ng-cloak class="mui-h6 mui-ellipsis">检查类型：{{x.CheckTypeName}}</p>
                            </div>
                            <div ng-cloak class="mui-table-cell mui-col-xs-2 mui-text-right">
                                <span ng-cloak class="mui-h5">{{x.CheckTime|JSONDate:'MM-dd'}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="menu-wrapper" class="menu-wrapper hidden" ng-init="SearchModel={};GetMyParkList();GetMyDepartmentList();GetSuperviseCheckType();InitDatePicker('#starttime');InitDatePicker('#endtime');">
        <div id="menu" class="menu">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>园区</label>
                    <select ng-model="SearchModel.ParkId" ng-change="GetPlaceList(SearchModel.ParkId);">
                        <option value="">所有园区</option>
                        <option ng-repeat="x in ParkList" value="{{x.Id}}">{{x.ParkName}}</option>
                    </select>
                </div>
                <div class="mui-input-row">
                    <label>场所</label>
                    <select ng-model="SearchModel.PlaceId">
                        <option value="">所有场所</option>
                        <option ng-repeat="x in PlaceList" value="{{x.Id}}">{{x.PlaceName}}</option>
                    </select>
                </div>
                <div class="mui-input-row">
                    <label>类型</label>
                    <select id="Dep_Select" ng-model="SearchModel.CheckType">
                        <option value="" selected>所有检查类型</option>
                        <option ng-repeat="x in CheckTypeList" value="{{x.Id}}">{{x.IntervalName}}</option>
                    </select>
                </div>
                <div class="mui-input-row">
                    <label>开始日期</label>
                    <input type="text" id="starttime" data-options='{"type":"date"}' ng-model="SearchModel.StartTime" readonly>
                </div>
                <div class="mui-input-row">
                    <label>结束日期</label>
                    <input type="text" id="endtime" data-options='{"type":"date"}' ng-model="SearchModel.EndTime" readonly>
                </div>
                <div class="mui-button-row">
                    <button type="button" onclick="toggleMenu();" ng-click="MGetSupInspection(SearchModel,1);" class="mui-btn mui-btn-primary">查询</button>
                </div>
            </form>
        </div>
    </div>
    <div id="menu-backdrop" class="menu-backdrop"></div>
</div>

@section js{
    <script src="~/Assets/js/mui.pullToRefresh.js"></script>
    <script src="~/Assets/js/mui.pullToRefresh.material.js"></script>
    <script src="~/Assets/js/pg/MCheckForm.js?v=@DateTime.Now.ToString("yyyyMMddHH")"></script>

    <script>
        mui.init({
            swipeBack: false,
            keyEventBind: {
                backbutton: false  //关闭back按键监听
            }
        });
        //mui.showLoading("正在加载..", "div");
        setTimeout(function () {
            //mui.hideLoading();
            //document.body.classList.add('menu-open');
            //menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
            //menu.className = 'menu bounce-in-down animated';
            //backdrop.style.opacity = 1;
        }, 2000);


        var menuWrapper = document.getElementById("menu-wrapper");
        var menu = document.getElementById("menu");
        var menuWrapperClassList = menuWrapper.classList;
        var backdrop = document.getElementById("menu-backdrop");
        var info = document.getElementById("info");

        backdrop.addEventListener('tap', toggleMenu);
        document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
        //document.getElementById("icon-menu").addEventListener('tap', toggleMenu)
        //下沉菜单中的点击事件
        mui('#menu').on('tap', 'a', function () {
            toggleMenu();
            info.innerHTML = '你已选择：' + this.innerHTML;
        });
        var busying = false;

        function toggleMenu() {
            if (busying) {
                return;
            }
            busying = true;
            if (menuWrapperClassList.contains('mui-active')) {
                document.body.classList.remove('menu-open');
                menuWrapper.className = 'menu-wrapper fade-out-up animated';
                menu.className = 'menu bounce-out-up animated';
                setTimeout(function () {
                    backdrop.style.opacity = 0;
                    menuWrapper.classList.add('hidden');
                }, 500);
            } else {
                document.body.classList.add('menu-open');
                menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
                menu.className = 'menu bounce-in-down animated';
                backdrop.style.opacity = 1;
            }
            setTimeout(function () {
                busying = false;
            }, 500);
        }

    </script>
}
